<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <!-- <link rel="stylesheet" href="../css/remove.css"> -->
</head>

<body>
  <div class="container">
    <h1>王者荣耀</h1>
    <div>

      <a href="./add.html" type="button" class="btn btn-success pull-right">添加</a>

    </div>

    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>id</th>
          <th>英雄</th>
          <th>年龄</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id='tbody'>
      </tbody>
    </table>

  </div>
  <script src="../js/jquery.min.js"></script>
  <script>
    $(() => {
      const getHtml = () => {
        $.ajax({
          type: 'get',
          url: 'http://127.0.0.1:8080/heors',
          success: res => {
            const { status, message } = res;
            let html = '';
            message.forEach(item => {
              html += `
            <tr>
              <td>${item.id}</td>
              <td>${item.name}</td>
              <td>${item.age}</td>
              <td>${item.add_time}</td>
              <td>
                <a href='./edit.html?id=${item.id}' type="button" class="btn btn-lg btn-primary btn-sm">编辑</a>
                <button type="button" class="btn btn-lg btn-warning btn-sm" data-id='${item.id}' id='deleteBtn'>删除</button>
              </td>
            </tr>`
            });
            $('#tbody').html(html);
          }
        })
      }
      getHtml();
      $('#tbody').on('click', "#deleteBtn", function () {
        const id = $(this).data('id');
        $.ajax({
          type: 'delete',
          url: 'http://127.0.0.1:8080/heors/' + id,
          success(res) {
            const { message, status } = res;
            if (status != 200) return console.log(message);
            getHtml();
            alert('删除成功');
          }
        })
      });
    })
  </script>
</body>

</html>